<template>
  <div class="box">
  </div>
</template>

<script>
// 目的:各种形状的创建
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 一。创建三维场景对象Scene
const scene = new THREE.Scene();
// scene.background = new THREE.Color('#aaaaaa');
// 给场景加物体
// 1.定义物体的形状：长方体 width height depth【深度】
// const geometry = new THREE.BoxGeometry(150, 150, 150);
// 各种形状的创建
// 1.1 球体 r
// const geometry = new THREE.SphereGeometry( 100 );
// 1.2圆柱体 上r 下r 高
// const geometry = new THREE.CylinderGeometry( 20, 50, 100 );
// 1.3圆形平面 r
// const geometry = new THREE.CircleGeometry( 100 );
// 1.4矩形平面 x y
const geometry = new THREE.PlaneGeometry( 50, 100 );
// 2.定义物体的材质：颜色（统一颜色） side: THREE.DoubleSide（平面上可观看双面）
const mesbasic=new THREE.MeshBasicMaterial({color: 0x00ffff,side: THREE.DoubleSide}); //基础网格材质【不受光照影响】
// 为每个面创建不同的材质
// const materials = [
//     new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 }), // 右面 - 红色
//     new THREE.MeshBasicMaterial({ color: 0x00ff00 , transparent: true, opacity: 0.5 }), // 左面 - 绿色
//     new THREE.MeshBasicMaterial({ color: 0x0000ff  , transparent: true, opacity: 0.5}), // 上面 - 蓝色
//     new THREE.MeshBasicMaterial({ color: 0xffff00 , transparent: true, opacity: 0.5 }), // 下面 - 黄色
//     new THREE.MeshBasicMaterial({ color: 0xff00ff  , transparent: true, opacity: 0.5}), // 前面 - 紫色
//     new THREE.MeshBasicMaterial({ color: 0x00ffff , transparent: true, opacity: 0.5 })  // 后面 - 青色
//   ];
// 3.创建一个网格模型，用于表示生活中的物体
const mesh=new THREE.Mesh(geometry, mesbasic);
// 3.3 设置物体相对于场景中的位置 (疑问：设置这个位置是需要注意什么吗，是随意还是按照规则？)(疑问2：默认值0 0 0具体是在哪个位置从哪里能看出来？【可以用生活中的例子来讲一下这里】)
mesh.position.set(0, 0, 0);//表示对象局部位置。默认值为(0, 0, 0)。
// 4.将物体放到场景中
scene.add(mesh);
// 添加辅助线
const axesHelper = new THREE.AxesHelper(200);
axesHelper.setColors(0xff0000, 0x00ff00, 0x0000ff);
scene.add( axesHelper );

// 二。创建相机 （相机是3D场景中用于观察的“眼睛”）[角度, 宽高比, 截取距离的最近距离, 截取距离的最远距离]（疑问：这个相机是在场景里面还是外面？）
const camera=new THREE.PerspectiveCamera(45, 800 / 500, 0.1, 10000);
// 两个坐标连成一条线（就是视线）
// 相机的摆放位置
camera.position.set(250, 150, 250);
// 相机的目标视线
camera.lookAt(mesh.position);


// 三。 渲染器(类似于咔拍照动作)
const render=new THREE.WebGLRenderer();
render.setSize(800, 500);
render.render(scene, camera);
console.log('render.domElement',render.domElement);
// document.body.appendChild(render.domElement);

// 涉及到旋转 缩放 移动 则需要引入轨道控制器
const controls = new OrbitControls( camera, render.domElement );
function animate() {
	requestAnimationFrame( animate );
	controls.update();
	render.render( scene, camera );
}
animate()
// 
export default{
  mounted() {
    document.querySelector('.box').appendChild(render.domElement);
  },
  beforeDestroy() {
 if (render &&render.domElement) {
      render.dispose();
    }
  },
}
</script>
<style scoped>
</style>